<template>

  <div >
<div>
<mt-header fixed title="大连科技学院录取通知">

  <mt-button icon="more" slot="right"></mt-button>
</mt-header>
</div>
<div>
 <mt-swipe :auto="4000" :defaultIndex="1" >
      <mt-swipe-item class="slide1">
        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2362728327,250434369&fm=173&app=25&f=JPEG?w=218&h=146&s=C6A421E40B3392D01E7FAC8A030070CA" alt="">
      </mt-swipe-item>
      <mt-swipe-item class="slide2">2</mt-swipe-item>
      <mt-swipe-item class="slide3">3</mt-swipe-item>
    </mt-swipe>
</div>
<div>
  <mt-cell
  title="标题文字"
  to="//github.com"
  is-link
  value="带链接">
</mt-cell>
</div>

  </div>
</template>

<script>
import 'mint-ui/lib/style.css'
import { Toast } from 'mint-ui'

export default {
  name: 'HelloWorld',
  mounted: function () {
    Toast('提示信息')
  },

  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      selected: true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mint-swipe {
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
      }
 .slide1 {
        background-color: #0089dc;
        color: #fff;
      }
      .slide2 {
        background-color: #ffd705;
        color: #000;
      }
      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }

</style>
